﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Drag & Drop Demo</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
<script  type="text/javascript">
    function DragHandler(target, e) {
        e.dataTransfer.setData('Text', target.id);
    }
    function DropHandler(target, e) {
        var id = e.dataTransfer.getData('Text');
        target.appendChild(document.getElementById(id));
        e.preventDefault();
    }
</script>
</head>
<body>

<header>
<h1>HTML5 Drag & Drop Demo</h1>
</header>
<div id="dndcontainer">
<div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox">
<img src="../img/tumblr.png" id="club" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
<img src="../img/twitter.png" id="heart" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
<img src="../img/vimeo.png" id="spade" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
<img src="../img/wordpress.png" id="diamond" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
</div>
<div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false" class="dndbox"></div>
</div>
<div style="clear:both;"></div>
<div id="demonotes" style=" text-align:center">Drag and drop images from one container to another. Works in all major browsers except Opera.</div>

</body>
</html>